{#
  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from 'macros-protocol.html' import split %}

{% extends "firefox/base/base-protocol.html" %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('firefox-compare-article') }}
{% endblock page_css %}

{% set utm_params = '?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=browser-comparison' %}

{% block article_title %}{% endblock %}

{% block page_title %}{{ self.article_title() }}{% endblock %}

{% block sub_navigation %}
  {% include 'firefox/browsers/compare/includes/subnav.html' %}
{% endblock %}

{% block content %}
<div class="compare-article-container">
  <div class="mzp-l-content mzp-t-content-md">
    <article class="mzp-c-article compare-article">
      <h1 class="mzp-c-article-title">{{ self.article_title() }}</h1>
      {% block article_content %}{% endblock %}
    </article>
  </div>
</div>

{% block footer_cta %}
  {% call split (
    image=resp_img('img/firefox/compare/footer-browser.png',
        srcset={
          'img/firefox/compare/footer-browser-high-res.png': '2x'
        },
        optional_attributes={
          "alt": "",
          "width": "400"
        }
      ),
    block_class='c-compare-footer mzp-l-split-reversed mzp-t-content-lg',
  ) %}
    <h3>{{ ftl('compare-shared-footer-cta-title') }}</h3>
    <p>{{ ftl('compare-shared-footer-cta-desc') }}</p>
    {{ download_firefox_thanks(alt_copy=ftl('download-button-download-firefox'), dom_id='compare-footer-download', button_class='mzp-t-product mzp-t-lg', download_location='footer') }}
  {% endcall %}
{% endblock %}

{% endblock content %}

{% block js %}
  {{ js_bundle('firefox_compare_article') }}
{% endblock %}
